<script setup>
import { ref } from "vue";
import { MsgType } from "../../../constants/chat";

const props = defineProps({
    msg: {
        id: String,
        content: String,
        role: MsgType
    }
})

const isUser = ref(props.msg.role == MsgType.USER)
</script>

<template>
    <div class="item-row" :style="{'justify-content': isUser ? 'end' : 'start'}">
        <div class="item-style" :style="{'flex-direction' : isUser ? 'row-reverse' : 'row'}">
            <el-avatar 
                class="avatar-style"
                :icon="isUser ? 'Avatar' : 'Platform'"
                :style="{'background-color': isUser ? '#f56a00' : 'rgb(100,149,237)'}"
                />
            <el-card :body-style="{padding: '12px', 'line-break': 'anywhere', 'white-space': 'pre-line'}" 
                shadow="never" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)">
                {{ msg.content }}
            </el-card>
        </div>
    </div>
</template>

<style scoped>
.item-row {
    display: flex;
    width: 100%;
    padding: 24px 0;
}

.item-style {
    display: flex;
    max-width: 80%;
    padding: 0 10px;
    gap: 20px;
}

.avatar-style {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}
</style>